<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户首页</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <!-- 顶部搜索栏 -->
    <div class="bg-white p-4 sticky top-0 z-10 shadow-sm">
        <div class="flex items-center justify-between">
            <div class="text-lg font-bold">漫展拍摄</div>
            <div class="bg-gray-100 rounded-full px-3 py-2 flex items-center flex-1 mx-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
                <input type="text" placeholder="搜索摄影师" class="bg-transparent ml-2 outline-none flex-1 text-sm">
            </div>
            <div class="relative">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                </svg>
                <span class="absolute -top-1 -right-1 bg-red-500 text-white rounded-full w-4 h-4 text-xs flex items-center justify-center">2</span>
            </div>
        </div>
    </div>

    <!-- 漫展信息 -->
    <div class="bg-gradient-to-r from-purple-500 to-pink-500 p-4 text-white">
        <h2 class="font-bold text-lg">第十五届星幻动漫展</h2>
        <p class="text-sm opacity-90">上海国际会展中心 · 今日 09:30-17:30</p>
        <div class="flex mt-2">
            <span class="bg-white bg-opacity-20 text-xs px-2 py-1 rounded-full mr-2">200+ 摄影师在线</span>
            <span class="bg-white bg-opacity-20 text-xs px-2 py-1 rounded-full">5000+ 今日预约</span>
        </div>
    </div>

    <!-- 分类标签 -->
    <div class="bg-white p-3 overflow-x-auto whitespace-nowrap">
        <div class="inline-block px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm font-medium mr-2">全部</div>
        <div class="inline-block px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm font-medium mr-2">Cosplay</div>
        <div class="inline-block px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm font-medium mr-2">Lolita</div>
        <div class="inline-block px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm font-medium mr-2">汉服</div>
        <div class="inline-block px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm font-medium mr-2">JK制服</div>
        <div class="inline-block px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm font-medium">其他</div>
    </div>

    <!-- 摄影师列表 -->
    <div class="p-3">
        <!-- 摄影师卡片 1 - 空闲状态 -->
        <div class="bg-white rounded-lg shadow-sm p-3 mb-3 flex">
            <div class="relative">
                <img src="https://images.unsplash.com/photo-1492288991661-058aa541ff43?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" class="w-20 h-20 rounded-lg object-cover">
                <div class="absolute bottom-0 right-0 bg-green-500 text-white text-xs px-2 py-1 rounded-full">空闲</div>
            </div>
            <div class="ml-3 flex-1">
                <div class="flex justify-between items-start">
                    <h3 class="font-bold">小林摄影</h3>
                    <div class="text-yellow-500 text-sm flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                        4.9 (256)
                    </div>
                </div>
                <div class="text-xs text-gray-500 mt-1">专注Cosplay | 5年经验 | 提供精修</div>
                <div class="flex justify-between items-center mt-2">
                    <div class="text-red-500 font-medium">¥120起/组</div>
                    <button class="bg-purple-600 text-white text-sm px-3 py-1 rounded-full">立即预约</button>
                </div>
            </div>
        </div>

        <!-- 摄影师卡片 2 - 忙碌状态 -->
        <div class="bg-white rounded-lg shadow-sm p-3 mb-3 flex">
            <div class="relative">
                <img src="https://images.unsplash.com/photo-1554048612-b6a482bc67e5?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" class="w-20 h-20 rounded-lg object-cover">
                <div class="absolute bottom-0 right-0 bg-red-500 text-white text-xs px-2 py-1 rounded-full">忙碌</div>
            </div>
            <div class="ml-3 flex-1">
                <div class="flex justify-between items-start">
                    <h3 class="font-bold">阿泽影像</h3>
                    <div class="text-yellow-500 text-sm flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                        4.8 (189)
                    </div>
                </div>
                <div class="text-xs text-gray-500 mt-1">JK/Lolita | 提供场景 | 即时出片</div>
                <div class="flex justify-between items-center mt-2">
                    <div class="text-red-500 font-medium">¥150起/组</div>
                    <div class="text-gray-400 text-sm">预计空闲: 14:30</div>
                </div>
            </div>
        </div>

        <!-- 摄影师卡片 3 - 空闲状态 -->
        <div class="bg-white rounded-lg shadow-sm p-3 mb-3 flex">
            <div class="relative">
                <img src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" class="w-20 h-20 rounded-lg object-cover">
                <div class="absolute bottom-0 right-0 bg-green-500 text-white text-xs px-2 py-1 rounded-full">空闲</div>
            </div>
            <div class="ml-3 flex-1">
                <div class="flex justify-between items-start">
                    <h3 class="font-bold">星辰摄影</h3>
                    <div class="text-yellow-500 text-sm flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                        4.7 (132)
                    </div>
                </div>
                <div class="text-xs text-gray-500 mt-1">汉服/古风 | 后期精修 | 提供道具</div>
                <div class="flex justify-between items-center mt-2">
                    <div class="text-red-500 font-medium">¥180起/组</div>
                    <button class="bg-purple-600 text-white text-sm px-3 py-1 rounded-full">立即预约</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t flex justify-around p-2 text-xs text-gray-600">
        <div class="flex flex-col items-center text-purple-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
            </svg>
            <span>首页</span>
        </div>
        <div class="flex flex-col items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
            </svg>
            <span>订单</span>
        </div>
        <div class="flex flex-col items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
            </svg>
            <span>我的</span>
        </div>
    </div>
</body>
</html>